<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>新闻活动</title>-->
<!--    <link rel="stylesheet" href="css/index.css">-->
<!--    <link rel="stylesheet" href="css/newsEvents.css">-->
<!--    <link rel="stylesheet" href="css/aboutUs.css">-->
<!--</head>-->
<!--<body>-->
<!--&lt;!&ndash; 标头：导航，logo&ndash;&gt;-->
<!--<div class="head">-->
<!--    -->
<!--</div>-->
<!--<div class="news">-->
<!--    <div class="title">-->
<!--        <img src="imgs/aboutUs/title.png" alt="">-->
<!--        &lt;!&ndash;            <span >狼&nbsp;行&nbsp;千&nbsp;里&nbsp;吃&nbsp;肉</span>&ndash;&gt;-->
<!--        <span>Wolves travel thousands of miles to eat meat</span>-->
<!--    </div>-->
<!--    <div class="pages" id="pages">-->
<!--        <h1>-&nbsp;&nbsp;新闻活动&nbsp;&nbsp;-</h1>-->
<!--        <div class="page" id="page">-->
<!--            <div class="column">-->
<!--                <ul>-->
<!--                    <li><a href="article.html">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class="divider"></div>-->
<!--            <div class="column">-->
<!--                <ul>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                    <li><a href="article.html">XXXXX</a></li><span>XXXX-XX-XX</span>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="button-container">-->
<!--            <button id="last_page">上一页</button>-->
<!--            <span id="current_page">X</span>-->
<!--            <span>/</span>-->
<!--            <span id="sum_page">X</span>-->
<!--            <button id="next_page">下一页</button>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="footer">-->
<!--    </div>-->
<!--</div>-->
<!--<script src="js/newsEvents.js"></script>-->
<!--</body>-->
<!--</html>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻活动</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/newsEvents.css">
    <link rel="stylesheet" href="css/aboutUs.css">
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .column{
            color: white;
        }
        .column ul li a{
            color: white;
        }
        .column ul li a:hover{
            animation: neon 3s infinite;
        }
        .button-container{
            color: white;
        }
        .pages h1{
            color: white;
            animation: neon 3s infinite;
        }
    </style>
</head>
<body>
<div class="head">
    <div class="logo">
        <a href="index.html"><img src="imgs/index/ESDC_logo.jpg" alt=""></a>
        <div class="logo_name">
            <h1>&nbsp;工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</h1>
            <p>&nbsp;Engineering Software Development Centre</p>
        </div>
    </div>
    <div class="top_list">
        <ul>
            <li><a href="visitor.html">访客</a></li>
<!--            <li><a href="">邮箱</a></li>-->
            <li class="dropdown"><a href="">联系我们</a>
                <div class="dropdown-content">
                    <p>电话：123-456-7890</p>
                    <p>邮箱：contact@example.com</p>
                    <p>地址：北京市朝阳区</p>
                </div>
            </li>
            <li id="userProfileBtn" style="display: none;">
                <a href="javascript:void(0);" onclick="showPersonalBox()">用户名</a>
            </li>
            <li id="loginRegisterBtn">
                <a href="javascript:void(0);" onclick="showLoginBox()">登录</a><span>/</span><a href="javascript:void(0);" onclick="showRegistrationBox()">注册</a>
            </li>
        </ul>
    </div>
    <div class="bottom_nav">
        <ul>
            <li><a href="aboutUs.html">关于我们</a></li>
            <li><a href="researchFindings.html">研究成果</a></li>
            <li><a href="newsEvents.html">新闻活动</a></li>
            <li><a href="cooperation.html">合作交流</a></li>
        </ul>
    </div>

</div>
<div class="myCanvas" id="myCanvas">
    <canvas></canvas>
</div>
<div class="news">
    <div class="title">
        <img src="imgs/aboutUs/title.png" alt="">
        <span>Wolves travel thousands of miles to eat meat</span>
    </div>
    <div class="pages" id="pages">
        <h1>-&nbsp;&nbsp;新闻活动&nbsp;&nbsp;-</h1>
        <div class="page" id="page">
            <div class="column">
                <ul id="articleList1">
                    <!-- 文章列表将动态插入 -->
                </ul>
            </div>
            <div class="divider"></div>
            <div class="column">
                <ul id="articleList2">
                    <!-- 文章列表将动态插入 -->
                </ul>
            </div>
        </div>
        <div class="button-container">
            <button id="last_page">上一页</button>
            <span id="current_page">1</span>
            <span>/</span>
            <span id="sum_page">1</span>
            <button id="next_page">下一页</button>
        </div>
    </div>
    <div class="footer">
        <div class="footer_image">
            <img src="imgs/footer/ESDC_logo.jpg" alt="">
        </div>
        <div class="words">
            <p>版权:江西师范大学(Jiangxi Normal University)ICP备案编号：赣B2-20050166号-1</p>
            <p>学校地址：［瑶湖校区］江西省南昌市紫阳大道99号邮政编码：330022</p>
            <p>［青山湖校区］江西省南昌市北京西路437号邮政编码：330027</p>
        </div>
        <div class="QRcode">
            <img src="imgs/footer/QRcode1.png">
            <img src="imgs/footer/QRcode2.png">
        </div>
    </div>
</div>
<!-- 弹窗 -->
<div id="loginBox" class="login-box" style="display: none; position: fixed; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; padding: 0; width: 1200px; height: 850px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    <iframe id="loginFrame" src="" frameborder="0" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
<script src="js/window.js"></script>
<script>
    window.onload = function() {
        fetchArticles();
    };

    function fetchArticles() {
        axios({
            method: "get",
            url: "http://localhost:8080/javaweb_project/articles/selectAllArticles",
        }).then(function (resp) {
            console.log(resp.data); // 打印返回的数据
            let articles = resp.data;
            let articlesContainer1 = document.getElementById('articleList1');
            let articlesContainer2 = document.getElementById('articleList2');

            articlesContainer1.innerHTML = '';
            articlesContainer2.innerHTML = '';

            if (!Array.isArray(articles) || articles.length === 0) {
                console.error('No articles found or invalid data format');
                return;
            }

            articles.forEach((article, index) => {
                let liElement = document.createElement('li');
                let articleElement = document.createElement('a');
                articleElement.href = `article.html?articleId=${article.articleId}`;
                articleElement.textContent = article.title;
                let dateElement = document.createElement('span');
                dateElement.textContent = article.publishDate.split(' ')[0]; // 格式化日期

                liElement.appendChild(articleElement);
                liElement.appendChild(dateElement);

                if (index < Math.ceil(articles.length / 2)) {
                    articlesContainer1.appendChild(liElement);
                } else {
                    articlesContainer2.appendChild(liElement);
                }
            });
        }).catch(function (error) {
            console.error('Error fetching articles:', error);
        });
    }
</script>
<script>
    (function(){

        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;

        var canvas = document.querySelector("canvas");
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight;

        var ctx = canvas.getContext("2d");

        ctx.globalCompositeOperation = "saturation"; //合成方法

        //stats.js
//   var stats = new Stats();
// document.body.appendChild( stats.domElement );

        var particles = [];

        var pIndex = 0;
        var frameId;


        /*             */
        /*Particle */
        /*            */

        function Particle(color,x,y,circleSize,radius){
            this.color = color;
            this.x = 0;
            this.y = 0;
            this.posX = x;
            this.posY = y;

            this.circleSize = circleSize;

            this.direction = getRandom(-1,1);

            this.wave;
            this.amplitude = getRandom(-50,50);
            this.waveSpeed = getRandom(2,3);
            this.speed = getRandom(1,2);

            particles[pIndex] = this;
            this.id = pIndex;
            pIndex++;

            this.radius = radius;
            this.count = 0;
        };

        Particle.prototype.draw = function(){
            this.radius += Math.sin(this.count*0.1);

            this.wave = Math.sin( Math.PI/180*this.count*this.waveSpeed * this.direction ) * this.amplitude;

            this.x = Math.sin( Math.PI/180*this.count * this.speed * this.direction ) * this.circleSize - this.radius/2 + this.wave + this.posX;
            this.y = Math.cos( Math.PI/180*this.count * this.speed * this.direction) * this.circleSize - this.radius/2 + this.wave + this.posY;

            this.count += 1;

            var colA = hex2rgba(this.color,1);
            var colB = hex2rgba(this.color,0);

            var grd = ctx.createRadialGradient( this.x+this.radius/2,  this.y+this.radius/2,  0,  this.x+this.radius/2,  this.y+this.radius/2, this.radius/2);
            grd.addColorStop(0, colA);
            grd.addColorStop(1,  colB);

            ctx.fillStyle = grd;
            ctx.beginPath();
            ctx.fillRect( this.x, this.y, this.radius, this.radius );
            ctx.closePath();
            ctx.fill();

        }



        var colorTips = [
            '#151313',
            '#0b0a0a',
            '#929392',
            '#e5ebec',
            '#171516'
        ]

        //function Particle(color,x,y,circleSize,radius){
        for(var i = 0; i < 30; i++){
            var r = Math.floor( getRandom(0,colorTips.length) );
            new Particle( colorTips[r], getRandom(0,canvas.width/2), getRandom(0,canvas.height), getRandom(-canvas.width,canvas.width),getRandom(500,1000));
        }



        //function Particle(circleSize,radius,x,y,direction,speed,amplitude,waveSpeed){

        function loop(){
            ctx.clearRect(0,0, canvas.width, canvas.height);  //画面更新

            //Particle描画
            for(var i in particles){
                particles[i].draw();
            }

            frameId = requestAnimationFrame(loop);
            if(frameId % 2 == 0) { return; }//60fps
            stats.update();
        }

        loop();


        window.addEventListener("resize", function(){
            // canvas.width = window.innerWidth;
            // canvas.height = window.innerHeight;
            // x = canvas.width / 2;
            // y = canvas.height / 2;
        });


        function getRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function hex2rgba (hex, alpha = 1) {


            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
            let c = null
            if (r) {
                c = r.slice(1,4).map(function(x) { return parseInt(x, 16) })
            }

            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
            if (r) {
                c = r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16) })
            }

            if (!c) {
                return null
            }
            return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
        }


    })();
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        checkLoginStatus(); // 页面加载时检查登录状态
        document.addEventListener('loginStatusChanged', checkLoginStatus); // 监听登录状态变化事件
    });


    function updateUserInfo(username) {
        const userProfileBtn = document.getElementById('userProfileBtn');// 用户名按钮
        const loginRegisterBtn = document.getElementById('loginRegisterBtn');// 登录注册按钮

        if (userProfileBtn && loginRegisterBtn) {
            userProfileBtn.querySelector('a').innerText = username;
            userProfileBtn.style.display = 'inline'; // 显示用户名按钮,inline保证不被换行
            loginRegisterBtn.style.display = 'none'; // 隐藏登录注册按钮
        } else {
            console.error('User profile or login register button not found');
        }
    }
</script>
</body>
</html>